<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户设置" name="userInfo">
      <el-row :gutter="20">
        <el-col :span="10" :offset="6">
          <el-form ref="userInfoForm" :model="userInfo" required-asterisk :rules="userInforules"
            :label-position="position" center>
            <el-form-item prop="name" required label="姓名">
              <el-input v-model="userInfo.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="mobile">
              <el-input v-model="userInfo.mobile" clearable></el-input>
            </el-form-item>
            <el-form-item label="性別" prop="gender">
              <el-radio-group v-model="userInfo.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
                <el-radio :label="-1">未知</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" required>
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="userInfo.birth" style="width: 100%">
                </el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button @click="updateInfo('userInfoForm')" type="primary">
                <i class="fa fa-check"></i>
                更新
              </el-button>
              <el-button @click="resetForm('info')" type="info">
                <i class="fa fa-reply-all"></i>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="密码设置" name="passwrod">
      <el-row :gutter="20">
        <el-col :span="10" :offset="6">
          <el-form ref="userPasswordForm" :model="userPasswordInfo" required-asterisk :label-position="position"
            :rules="passwordRules" center>
            <el-form-item label="原密码" required prop="oldPassword">
              <el-input v-model="userPasswordInfo.oldPassword" clearable></el-input>
            </el-form-item>
            <el-form-item required prop="newPassword" label="新密码">
              <el-input type="password" v-model="userPasswordInfo.newPassword" clearable></el-input>
            </el-form-item>
            <el-form-item required prop="newPassword2" label="确认密码">
              <el-input type="password" v-model="userPasswordInfo.newPassword2" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="settingPassword">
                <i class="fa fa-check"></i>提交
              </el-button>
              <el-button @click="resetForm('passwordForm')" type="info">
                <i class="fa fa-reply-all"></i>重置
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import md5 from 'js-md5'
export default {
  name: 'userInfo',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value === this.userPasswordInfo.oldPassword) {
        callback(new Error('原密码与新密码一致'))
      } else {
        if (this.userPasswordInfo.newPassword2 !== '') {
          this.$refs.userPasswordForm.validateField('newPassword2')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userPasswordInfo.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      position: 'left',
      activeName: 'userInfo',
      action: 'api/system/file/', //url
      fileList: [],
      userInfo: {
        name: '',
        gender: '',
        mobile: '',
        avatar: '',
        email: '',
        birth: ''
      },
      userInforules: {
        name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        mobile: [
          { pattern: /^1[3|4|5|7|8]\d{9}$/, message: '请输入正确手机号' }
        ]
      },

      userPasswordInfo: {
        oldPassword: '',
        newPassword: '',
        newPassword2: '',
      },
      passwordRules: {
        oldPassword: [
          {
            required: true,
            message: '请输入原密码',
            trigger: 'blur'
          }
        ],
        newPassword: [{ validator: validatePass, trigger: 'blur' }],
        newPassword2: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    // this.getCurrentUserInfo()
  },
  created: function () {
    if (this.$store.state.User.haslogin != true) {
      this.$message("未登录");
      this.$router.push({ path: "/" });
      return;
    }
  },
  methods: {
    /**
     * 更新用户信息
     */
    updateInfo(formName) {
      const _self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功！')
        } else {
          this.$message.error("请输入必填信息！");
          return false;
        }
      });
    },
    // 重置
    resetForm(name) {
      console.log(name)
      const _self = this
      if (name === 'info') {
        _self.$refs.userInfoForm.resetFields()
      } else {
        _self.$refs.userPasswordForm.resetFields()
      }
    },
    // tab切换
    handleClick(tab, event) {
      const _self = this
      if (tab.paneName === 'userInfo') {
        _self.$refs.userPasswordForm.resetFields()
        _self.getCurrentUserInfo()
      } else {
        _self.$refs.userInfoForm.resetFields()
      }
    },
    /**
     * 重新设置密码
     */
    settingPassword() {
      const _self = this;
      _self.$refs.userPasswordForm.validate((valid) => {
        if (valid) {
          if (this.$store.state.User.haslogin != true) {
            this.$message("未登录");
            return;
          };
          resetPwd({
            'oldpwd': md5(this.userPasswordInfo.oldPassword),
            'newpwd': md5(this.userPasswordInfo.newPassword),
            'email': this.$store.state.User.name
          })
            .then((res) => {
              if (res.rescode != 200) {
                this.$message(res.msg)
              } else {
                this.$message('修改密码成功')
                loginout({})
                  .then((res) => {
                    setTimeout(() => {
                      this.$store.commit("User/LoginOut");
                      this.$router.push({ path: "/" });
                      this.$message({
                        type: "success",
                        message: "已退出登录!",
                      });
                      this.haslogin = false;
                    }, 1000);
                  })
                  .catch((err) => {
                  })
              }
            })
            .catch((err) => {
              this.$message.error('修改密码失败')
            })
        } else {
          // 校验失败
          // 登录表单校验失败
          this.$message.error('表单校验失败，请检查')
        }
      })
    },
  }
}
</script>
